<template>
  <a-card title="消费查询" :bordered="false" class="condition-card">
    <div class="condition-row">
      <div class="condition-col flex align-center justify-between">
        <div class="input-box flex align-center">
          <span class="label mr-20">网点</span>
          <a-select allow-clear placeholder="请选择" v-model:value="conditionState.wdCode" @change="handleShopChange">
            <a-select-option v-for="shop in shopList" :value="shop.wdCode" :key="shop.wdCode">{{shop.wdname}}</a-select-option>
          </a-select>
        </div>
        <div class="input-box flex align-center">
          <span class="label mr-20">设备</span>
          <a-select allow-clear placeholder="请选择" v-model:value="conditionState.deviceId">
            <a-select-option v-for="device in deviceList" :value="device.bianhao" :key="device.bianhao">{{device.name || device.bianhao}}</a-select-option>
          </a-select>
        </div>
        <div class="input-box flex align-center">
          <span class="label mr-20">时间段</span>
          <a-range-picker v-model:value="conditionState.timeRange" show-time format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </div>
        <a-button class="ml-20" type="primary" :loading="searchLoading" @click="handleSearch">查询</a-button>
      </div>
    </div>
  </a-card>
  <a-card title="消费记录" :bordered="false" class="result-card mt-20">
    <a-table :columns="columns" :data-source="recordList" :pagination="false" :scroll="{y: 'calc(100vh - 405px)'}">
    </a-table>
    <div class="pagination-content flex justify-end">
      <a-pagination v-model:current="conditionState.page" show-quick-jumper show-size-changer :show-total="total => `共 ${total} 条`" :total="total" v-model:pageSize="conditionState.size" @change="handlePageChange" />
    </div>
  </a-card>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import api from '../../api/statistics'
import shopApi from '../../api/merchant'
import deviceApi from '../../api/device'
import {ConsumeItem, DeviceItem, ShopItem, UserItem} from '../../types/common'
import {UserTypes, UserTypesObj, UserSex} from '../../common/constants'
import {formatDateTime, uuid} from '../../common/utils'
const searchLoading = ref<boolean>(false)
const conditionState = reactive({
  userName: '',
  wdCode: undefined,
  deviceId: undefined,
  begin: '',
  end: '',
  timeRange: ['', ''],
  page: 1,
  size: 10,
})
const total = ref<number>(0)
const recordList = ref<ConsumeItem[]>([])
const columns = [
  {
    dataIndex: 'userName',
    key: 'userName',
    title: '账号',
  },{
    dataIndex: 'amount',
    key: 'amount',
    title: '消费金额',
  },{
    dataIndex: 'websiteName',
    key: 'websiteName',
    title: '网点',
  },{
    dataIndex: 'deviceName',
    key: 'deviceName',
    title: '设备',
  },{
    dataIndex: 'beginTime',
    key: 'beginTime',
    title: '开始时间',
  },{
    dataIndex: 'endTime',
    key: 'endTime',
    title: '结束时间',
  },{
    dataIndex: 'time',
    key: 'time',
    title: '时长(分钟)',
  },
]
const shopList = ref<ShopItem[]>([])
const getShopList = async () => {
  shopList.value = []
  try {
    const res = await shopApi.getList({
      name: '',
      page: 0,
      size: 999,
    })
    if (res.content) {
      if (res.content.content && res.content.content.length) {
        shopList.value = res.content.content
      }
    }
  } catch (e: any) {
  }
}
getShopList()
const deviceList = ref<DeviceItem[]>([])
const getDeviceListByWdCode = async (wdCode: string) => {
  deviceList.value = []
  try {
    const res = await deviceApi.getListByWdCode(wdCode)
    if (res.content) {
      if (res.content && res.content.length) {
        deviceList.value = res.content
      }
    }
  } catch(e: any) {
  }
}
const handleShopChange = () => {
  conditionState.deviceId = undefined
  getDeviceListByWdCode(conditionState.wdCode)
}
const getPageData = async () => {
  searchLoading.value = true
  recordList.value = []
  const params = {
    deviceId: conditionState.deviceId || '',
    wdCode: conditionState.wdCode || '',
    page: conditionState.page - 1,
    size: conditionState.size,
  }
  if (conditionState.timeRange) {
    if (conditionState.timeRange[0]) {
      params.begin = conditionState.timeRange[0]
    }
    if (conditionState.timeRange[1]) {
      params.end = conditionState.timeRange[1]
    }
  }
  try {
    const res = await api.getAmountRecordList(params)
    searchLoading.value = false
    if (res.content) {
      total.value = res.content.total || 0
      if (res.content.content && res.content.content.length) {
        res.content.content.forEach((record: ConsumeItem) => {
          if (record.beginTime) {
            record.beginTime = formatDateTime(new Date(record.beginTime))
          }
          if (record.endTime) {
            record.endTime = formatDateTime(new Date(record.endTime))
          }
        })
        recordList.value = res.content.content
      }
    }
  } catch(e: any) {
    searchLoading.value = false
  }
}
const handleSearch = () => {
  conditionState.page = 1
  total.value = 0
  getPageData()
}
const handlePageChange = (page: number, pageSize: number) => {
  if (pageSize !== conditionState.size) {
    conditionState.page = 1
  }
  getPageData()
}
handleSearch()

</script>

<style scoped lang="less">
.condition-col{
  .ant-input{
    min-width: 300px;
  }
  .ant-select{
    min-width: 200px;
  }
  .ant-input-affix-wrapper{
    width: 200px;
  }
}
.ant-btn-link{
  padding: 0;
}
</style>
